/* eslint-disable vue/valid-v-for */
<template>
  <div class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-row :gutter="13" type="flex">
        <!-- @blur="searchSku" -->
        <el-col :span="4">
          <el-input v-model="search" placeholder="输入供应商"/>
        </el-col>

        <el-col :span="2">
          <el-select v-model="selectStatusValue" placeholder="请选择" @change="selectStatus">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="1">
          <el-button type="primary" @click="searchSku">查询</el-button>
        </el-col>

        <el-col :span="1">
          <el-button v-show="checkPermission('pas:supplier:add')" type="primary" @click="addFun()">新增</el-button>
        </el-col>

        <!-- <el-col :span="1">
            <el-button
                type="primary"

                >编辑</el-button>
        </el-col>-->
      </el-row>
    </div>

    <!-- v-loading="listLoading" -->
    <el-table :data="supplierList" border highlight-current-row style="width: 95%;">
      <el-table-column prop="supplierCode" label="供应商编码" min-width="10%"/>
      <el-table-column prop="supplierName" label="供应商名称" min-width="20%"/>
      <!-- <el-table-column :formatter="formatterStatus" prop="status" label="状态" min-width="15%"/> -->
      <el-table-column prop="status" label="状态" min-width="15%">
        <template slot-scope="scope">
          <span v-if="scope.row.status==1" style="color:#28A087">正常</span>
          <span v-else-if="scope.row.status==3" style="color:#F05050">停用</span>
          <span v-else>停采</span>
        </template>
      </el-table-column>

      <el-table-column prop="contactName" label="联系人" min-width="10%"/>
      <el-table-column prop="phone" label="电话" min-width="10%"/>
      <el-table-column
        :formatter="formatterSupplierType"
        prop="supplierType"
        label="类别"
        min-width="10%"
      />
      <el-table-column prop="remarks" label="备注" min-width="10%"/>

      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-show="checkPermission('pas:supplier:edit')" type="primary" size="small" icon="el-icon-edit" @click="editFun(scope)">编辑</el-button>
          <el-button
            class="cancel-btn"
            size="small"
            type="warning"
            @click="cancelEdit(scope.row)"
          >{{ scope.row.status === 1 ? "停用":"启用" }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <component
      :is="modal"
      :modal-data="modalData"
      :modal-static-data="{closeChildAndRefresh}"
      @close="closeChild"
    />
  </div>
</template>

<script>
// post,
import { get, post } from '@/api/utils'
import Add from './dialog/Add.vue'
import { distributorList } from '@/api/payment'
import { parseTime } from '@/utils'
import { getUserInfo } from '@/api/login'

export default {
  data() {
    return {
      modal: null,
      modalData: {},
      statusList: [
        { value: '1', label: '正常' },
        { value: '3', label: '停用' }
      ],
      selectSortValue: null,
      selectStatusValue: null,
      search: '',
      selectName: '请选择',
      partnerList: [
        {
          value: 'partner-73250',
          text: '美博'
        },
        {
          value: 'partner-73251',
          text: '长沙供应商'
        }
      ],
      dialogFormVisible: false,
      supplierList: [],

      total: 1,
      listLoading: true,
      offset: 0,
      limit: 10,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        time: null,
        pageNumber: null
      },

      time: ''
    }
  },
  created() {
    this.getSupplierList()
    this.getPermission()
    // this.getDistributorList()
  },

  methods: {
    formatterStatus(row, column) {
      if (row.status) {
        if (row.status === 1) {
          return '正常'
        } else if (row.status === 2) {
          return '停采'
        } else if (row.status === 1) {
          return '停用'
        }
      }
    },
    formatterSupplierType(row, column) {
      if (row.supplierType) {
        if (row.supplierType === '1') {
          return '商城供应商'
        } else if (row.supplierType === '2') {
          return '网批供应商'
        }
      }
    },
    formatterRmb(field, row, column) {
      if (field) {
        return '￥' + row[field]
      }
    },

    getSupplierList() {
      this.listLoading = true
      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize

      var data = {
        offset: this.listQuery.pageNumber,
        count: this.listQuery.pageSize
      }

      if (this.selectSortValue !== null) {
        data.classification = this.selectSortValue
      }

      if (this.selectStatusValue !== null) {
        data.status = this.selectStatusValue
      }

      if (this.search !== null) {
        data.keyword = this.search
      }

      get('/wxh-cloud-rest/rest/', '/pas/supplier/list', data)
        .then(response => {
          if (response.data.status === 'success') {
            console.log(
              '-------------------------------------------------------------'
            )
            this.total = response.data.data.supplierCount
            this.supplierList = response.data.data.supplierList

            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    selectSort(event) {
      this.selectSortValue = event
      this.listQuery.page = 1
      this.getSupplierList()
    },
    selectStatus(event) {
      this.selectStatusValue = event
      this.listQuery.page = 1

      this.getSupplierList()
    },

    searchSku(event) {
      // console.log(event)
      this.listQuery.page = 1
      this.getSupplierList()
    },

    // 查询分销商
    getDistributorList() {
      distributorList().then(response => {
        this.disList = response.data.data
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getSupplierList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getSupplierList()
    },
    searchFrom() {
      if (this.listQuery.time !== null && this.listQuery.time !== '') {
        this.listQuery.starTime = parseTime(
          this.listQuery.time[0],
          '{y}-{m}-{d} {h}:{i}'
        )
        this.listQuery.endTime = parseTime(
          this.listQuery.time[1],
          '{y}-{m}-{d} {h}:{i}'
        )
      } else {
        this.listQuery.starTime = null
        this.listQuery.endTime = null
      }
      this.listQuery.pageNumber = 0
      this.getList()
    },
    cancelEdit(row) {
      var self = this

      if (row.status === 1) {
        this.$confirm('您确定停用此供应商?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            console.log(111111111111111111)
            self.updateSupplier(row)
          })
          .catch(e => {
            console.log(e)
            this.$message({
              type: 'info',
              message: '已取消当前操作'
            })
          })
      } else {
        this.updateSupplier(row)
      }
    },

    updateSupplier(row) {
      console.log(111111111111111111)
      var updateStatus = row.status === 1 ? 3 : 1
      var data = { supplierId: row.supplierId, status: updateStatus }
      const url = '/pas/supplier/update'
      post('/wxh-cloud-rest/rest/', url, data)
        .then(response => {
          if (response.data.status === 'success') {
            console.log(response)
            this.$message({
              message: '编辑供应商成功'
            })
            console.log(1111111111)
            this.closeChildAndRefresh()
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
        })
    },

    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下

      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'sidebarStatus') {
          this.userid = arr2[1]
        }
      }

      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(
            this.userid,
            JSON.stringify(response.data.data.permissions)
          )
        }
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) && localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },

    closeChild() {
      this.modal = null
    },
    addFun() {
      this.modalData = { type: 'creat', title: '新增供应商' }
      this.modal = Add
    },
    editFun(data) {
      var supplier = data.row
      this.modalData = { type: 'edict', title: '修改供应商', supplier }
      this.modal = Add
    },
    closeChildAndRefresh() {
      this.modal = null
      this.listQuery.page = 1
      this.getSupplierList()
    }
  }
}
</script>
